import React, { useEffect, useState } from 'react'
//nanoid是生成随机id的第三方模块
import { nanoid } from 'nanoid'
import './App.css'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
export default function App() {
  //状态提升,把数据放在App中
  //初始化todoList数据
  const [todoList, setTodoList] = useState([])
  // { id: nanoid(), name: '魈', done: false },
  // { id: nanoid(), name: '神里凌华', done: false },
  // { id: nanoid(), name: '莫娜', done: false }
  //初始化的逻辑
  useEffect(() => {
    //每次挂载完用本地存储的数据覆盖空数组
    setTodoList(JSON.parse(localStorage.getItem('todoList')) || [])
  }, [])
  //数据添加的逻辑
  useEffect(() => {
    //每次更新的时候向localStorage添加或者删除数据
    localStorage.setItem('todoList', JSON.stringify(todoList))
  }, [todoList])
  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <Header todoList={todoList} setTodoList={setTodoList} />
        <List todoList={todoList} setTodoList={setTodoList} />
        <Footer todoList={todoList} setTodoList={setTodoList} />
      </div>
    </div>
  )
}
